<template>
	<view class="">
		<u-navbar :placeholder="true">
			<view class="flex align-center" slot="left">
				<u-icon name="close" @click="goHome"></u-icon>
			</view>
			<view class="flex align-center" slot="center">
				<u-icon name="arrow-down" label="预约列表" labelPos="left" @click="onshowmenu"></u-icon>
			</view>
		</u-navbar>
		<view class="search-box pb-0">
			<u-search placeholder="请输入" shape="square" v-model="searchData.name" @search="onSearch" :showAction="false" />
			<view class="custom-btn" @click.stop="$u.route('/pages/shop/Reservation/add')">添加</view>
		</view>
		<view class="pl-20 pr-20 pb-10 bg-white">
			<u-tabs 
				:list="tags" 
				:current="selectTag" 
				@click.stop="sectionChange" 
				lineColor="#e54d42"
				:activeStyle="{color:'#e54d42'}">
				<view slot="right" style="padding-left: 10px;" @tap.stop="showFilter=true">
					<view class="flex align-center">
						<text class="fsize-28">筛选</text>
						<uni-icons custom-prefix="iconfont" type="icon-shaixuan" size="17" />
					</view>
				</view>
			</u-tabs>
		</view>
		<view class="my-list padding-0">
			<u-list :height="swiperHeight" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="item.orderId">
					<view class="item" @click.stop="$u.route('/pages/shop/Reservation/detail?id=' + item.orderId)">
						<view class="flex justify-between align-end pb-20">
							<view class="fsize-28">
								<view>{{item.storeName}}</view>
								<view class="mt-6">
									<text>{{item.userName}}</text>
									<text class="ml-10 line-gray fsize-24">{{item.userPhone}}</text>
								</view>
							</view>
							<!-- <text calss="fsize-24">{{item.appointmentTime.slice(11)}}</text> -->
							<text class="fsize-26">
								{{ 
									item.status===1?'待到店':
									item.status===4?'已取消':
									item.status===2?'已到店':
									item.status===3?'已开单':
									item.status===5?'待服务':
									item.status===9?'已服务':''
								}}
							</text>
						</view>
						<view class="pt-20 border-t pb-20 border-b">
							<view v-for="(project, pix) in item.items" :key="project.id">
								<view class="flex justify-between align-center">
									<view class="fsize-28 flex align-center">{{project.projectName}}</view>
									<view class="mt-10 line-gray fsize-24">
										<view>{{project.staffName}}</view>
									</view>
								</view>
							</view>
							<!-- <view @click.stop>
								<uni-icons custom-prefix="iconfont" type="icon-phone" color="#81c66d" size="34" @click="phoneCall(item.userPhone)"/>
								<u-tooltip :text="item.userPhone" overlay></u-tooltip>
							</view> -->
						</view>
						<view class="flex justify-between align-center pt-20">
							<div class="fsize-24 line-grey">
								<view>No: {{item.orderId}}</view>
								<view>{{item.date}}</view>
							</div>
							<view class="flex">
								<view class="ml-10" v-if="item.status===1 || item.status===2">
									<u-tag text="取消" type="warning" @click="ondelrs(item.orderId)"/>
								</view>
								<view class="ml-10" v-if="item.status===1">
									<u-tag text="到店" type="success" @click="onDefine(item.orderId)"/>
								</view>
								<!-- <view class="ml-10" v-if="item.status===1 || item.status===2">
									<u-tag text="修改" type="primary" @click="$u.route('/pages/shop/Reservation/add', {id: item.orderId})"/>
								</view> -->
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<u-popup :closeable="true" :safeAreaInsetTop="true" :show="showFilter" @close="showFilter=false" mode="right">
			<view class="my-popup-bx width-600 pl-20 pr-20">
				<view>
					<text calss="fsize-30">预约来源</text>
					<view class="flex flex--wrap mt-20">
						<view class="mr-10 mb-10" v-for="(item, index) in sourceRadios" :key="index">
							<u-tag 
								:text="item.name" 
								:plain="item.value!==searchData.type" 
								:name="index" 
								:borderColor="item.value===searchData.type?'#e54d42':'#aaa'"
								:color="item.value===searchData.type?'#fff':'#333'"
								:bgColor="item.value===searchData.type?'#e54d42':''"
								@click="radioClickSource(item)"
							/>
						</view>
					</view>
				</view>
				<view class="mt-10">
					<view>
						<text class="fsize-30">选择查询日期</text>
						<text class="ml-20 fsize-28 fweigh-600">{{searchData.date}}</text>
					</view>
					<view class="mt-20 flex flex--wrap">
						<view class="mr-10 mb-10" v-for="(item, index) in dateRadios" :key="index">
							<u-tag 
								:text="item.name" 
								:plain="item.value!==dateType" 
								:name="index" 
								:borderColor="item.value===dateType?'#e54d42':'#aaa'"
								:color="item.value===dateType?'#fff':'#333'"
								:bgColor="item.value===dateType?'#e54d42':''"
								@click="radioClickDate(item)"
							/>
						</view>
					</view>
				</view>
				<view class="btn-bx flex justify-end">
					<view class="">
						<u-tag text="重置" plain borderColor="#f7f7f7" color="#333" bgColor="#f7f7f7" @click="resetting" />
					</view>
					<view class="ml-20">
						<u-tag text="确定" plain borderColor="#e54d42" color="#fff" bgColor="#e54d42" @click="onSearch" />
					</view>
				</view>
			</view>
		</u-popup>
		<u-calendar 
			:show="showDate" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showDate=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
		<u-popup 
			:show="showMenu"
			@close="showMenu=false"
		>
			<view class="padding-20 pb-0 flex justify-around">
				<view class="width-160 height-160 border-radius-20 bg-gray flex justify-center align-center">
					<u-icon name="grid-fill" label="预约看板" labelPos="bottom" size="32" @click="onRou"></u-icon>
				</view>
				<view class="width-160 height-160 border-radius-20 bg-red-light flex justify-center align-center">
					<u-icon name="list-dot" label="预约列表" labelPos="bottom" size="32" color="#e54d42" labelColor="#e54d42" @click="showMenu=false"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import setDate from '@/common/date.js'
	import listHeightMixin from '@/common/computedAltitude.js'
	import { mapState } from 'vuex'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				showFilter: false,
				showDate: false,
				showMenu: false,
				popupsIx: 0,
				selectTag: 0,
				res: {},
				dateDispose:{
					minDate:'',
					maxDate:''
				},
				dataId: 0,
				actionTitle: '店务操作',
				actionShow: false,
				tags:[
					{ name: '全部', value: 0 },
					{ name: '待到店', value: 1 },
					{ name: '已到店', value: 2 },
					// { name: '已开单', value: 3 },
					{ name: '已取消', value: 4 },
					{ name: '待服务', value: 5 },
					{ name: '已服务', value: 9 },
				],
				sourceRadios: [
					{ name: '全部来源', value: 0 },
					{ name: '客户预约', value: 1 },
					{ name: '员工新增', value: 2 },
				],
				dateRadios:[
					{ name: '今天', value: 0 },
					{ name: '明天', value: 1 },
					{ name: '本周', value: 2 },
					{ name: '本月', value: 3 },
					{ name: '自定义', value: 4 },
				],
				dataList: [],
				popList: [],
				dateType: 0,
				searchData: {
					name:'',
					status: 0,
					type: 0,
					date:'',
					page: 1,
					limit: 20
				},
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
			}
		},
		onLoad(){
			this.searchData.date = setDate.getDate(0)
			this.dateDispose = {
				minDate:setDate.getDate(-365),
				maxDate:setDate.getDate(0)
			}
			if(this.userInfo.roleCategoryId===4){
				this.searchData.staffId = this.userInfo.userId
			}
			this.onSearch()
			uni.$on('upResList', opt=>{
				this.onSearch()
			})
		},
		onUnload(){
			uni.$off('upResList')
		},
		computed: {
			...mapState(['userInfo', 'store'])
		},
		methods: {
			onshowmenu(){
				if(this.userInfo.roleCategoryId !== 4){
					this.showMenu=true
				}
			},
			onRou(){
				this.showMenu = false
				uni.$u.route('/pages/shop/Reservation/appointment-board')
			},
			goHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onDefine(id){
				this.$reqJsonPost('StoreStaffDoSetisArrival', { id: id }).then(res=>{
					let ix = this.dataList.findIndex(im=> im.id === id)
					this.dataList[ix].status = 2
				})
			},
			ondelrs(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已沟通客户，并取消改预约订单?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('StoreStaffDoSetisCancel', { id: id }).then(res=>{
								// that.dataList=that.dataList.filter(im=>im.id !== id)
								that.getPageList()
							})
						}
					}		
				})
			},
			confirmDate(dates){
				let leg = dates.length
				this.searchData.date = `${dates[0]} 到 ${dates[leg-1]}`
				this.showDate = false
			},
			resetting(){
				this.searchData.date = setDate.getDate(0)
				this.dateType = 0
				this.searchData.type = 0
			},
			radioClickSource(im){
				this.searchData.type = im.value
			},
			radioClickDate(im) {
				this.dateType = im.value
				switch(im.name){
					case '今天':
						this.searchData.date = setDate.getDate(0)
						break
					case '明天':
						this.searchData.date = setDate.getDate(1)
						break
					case '本周':
						let d1 = setDate.getCurrentWeek()
						this.searchData.date = `${d1.startDate} 到 ${d1.endDate}`
						break
					case '本月':
						let d2 = setDate.getCurrentMonth()
						this.searchData.date = `${d2.startDate} 到 ${d2.endDate}`
						break
					case '自定义':
						this.showDate = true
						break
				}
			},
			getPageList(){
				this.$reqPost('GetAppointmentList', this.searchData).then(res=>{
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.searchData.page++
					}
				})
			},
			phoneCall(num){
				uni.makePhoneCall({ phoneNumber: num })
			},
			onClickPopMenu(e) {
				this.popupsIx = e.ix
				this.showPopups = false
				this.searchData.schemeId = e.value
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			},
			sectionChange(e) {
				if (this.selectTag !== e.index){
					this.selectTag = e.index
					this.searchData.status = e.value
					this.searchData.page = 1
					this.dataList = []
					this.getPageList()
				}
			},
			onSearch(value) {
				this.showFilter = false
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			},
		}

	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 10px 10px 0;
		background: #f8f8f8;
		height: 40px;
	}

	.tag {
		margin-left: 20rpx;
		font-size: 18rpx;
		font-weight: normal;
	}

	.btn-plus {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 1;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}
	.subtitleinline {
		display: inline-block;
		padding-right: 10px;
		font-size: 14px;
	}

	.vertical-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn-bx{
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
	}
</style>